<template>
  <div class="flex flex-col h-screen">
    <!-- 顶部栏，包含用户头像和注销按钮 -->
    <el-header class="bg-primary shadow-md flex items-center justify-between px-6">
      <div class="text-white text-xl font-bold">
        <i class="fa-solid fa-store mr-2"></i>Orange商城管理系统
      </div>
      <div class="flex items-center">
        <el-dropdown>
          <span class="flex items-center text-white cursor-pointer">
            <el-avatar shape="circle" :size="40" :src="'https://picsum.photos/40/40'" class="mr-2"></el-avatar>
            <span>{{ username || '管理员' }}</span>
            <el-icon class="ml-1"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">
                <el-icon><CircleClose /></el-icon>
                <span>注销</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 侧边栏菜单和右侧内容区域 -->
    <div class="flex flex-1">
      <!-- 侧边栏菜单 -->
      <el-aside class="w-64 bg-white shadow-md z-10">
        <el-menu 
          :default-active="activeMenu"
          mode="vertical"
          background-color="#ffffff"
          text-color="#303133"
          active-text-color="#409EFF"
          :router="false"
          class="border-none h-full"
          @select="handleMenuClick"
        >
          <el-menu-item index="category" class="py-3">
            <el-icon><Menu /></el-icon>
            <span>种类管理</span>
          </el-menu-item>
          <el-menu-item index="product" class="py-3">
            <el-icon><Box /></el-icon>
            <span>商品管理</span>
          </el-menu-item>
          <el-menu-item index="order" class="py-3">
            <el-icon><ShoppingCart /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="user" class="py-3">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧内容区域 -->
      <el-main class="flex-1 p-6 bg-gray-50 transition-all">
        <div class="bg-white rounded-lg shadow-sm p-6 min-h-[calc(100vh-200px)]">
          <component :is="currentComponent" />
        </div>
      </el-main>
    </div>
  </div>
</template>
<script setup>
import { ref, shallowRef, onMounted } from 'vue';
import CategoryManagement from '../components/CategoryManagement.vue';
import ProductManagement from '../components/ProductManagement.vue';
import OrderManagement from '../components/OrderManagement.vue';
import UserManagement from '../components/UserManagement.vue';
import { useRouter } from 'vue-router';
import { ArrowDown, CircleClose, Menu, Box, ShoppingCart, User } from '@element-plus/icons-vue';

const activeMenu = ref('category');
const username = ref('');
// 使用 shallowRef 来避免组件对象变为响应式
const currentComponent = shallowRef(CategoryManagement);
const router = useRouter();

onMounted(() => {
  // 可以从localStorage或API获取用户名
  username.value = localStorage.getItem('username') || '管理员';
});

const handleMenuClick = (menu) => {
  activeMenu.value = menu;
  switch (menu) {
    case 'category':
      currentComponent.value = CategoryManagement;
      break;
    case 'product':
      currentComponent.value = ProductManagement;
      break;
    case 'order':
      currentComponent.value = OrderManagement;
      break;
    case 'user':
      currentComponent.value = UserManagement;
      break;
  }
};

const handleLogout = () => {
  // 清空本地存储的 Authorization
  localStorage.removeItem('Authorization');
  localStorage.removeItem('username');
  // 跳转到登录界面
  router.push('/login');
};
</script>
<style scoped>
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.w-64 {
  width: 16rem;
}
.flex-1 {
  flex: 1;
}
.justify-end {
  justify-content: flex-end;
}
.items-center {
  align-items: center;
}
.bg-white {
  background-color: white;
}
.p-4 {
  padding: 1rem;
}
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>